import Taro, {Component} from '@tarojs/taro'
import { View, Icon, Input, Image, Text, Textarea, Picker, Button, Label, Checkbox} from '@tarojs/components'
import { connect } from '@tarojs/redux'
import styles from './index.module.scss'
import { getListByLessonRecord } from '@/api'
import { dialog} from '@/util';
import NoData from "@/components/NoData"
import { setUrl } from '@/actions/web'

@connect(({user}) => ({
  info: user.info,
}), dispatch => ({
  setUrl: (data) => dispatch(setUrl(data))
}))
export default class LessonRecord extends Component {

  config = {
    navigationBarTitleText: '培训课程'
  }

  state = {
    list: [],
  }

  componentWillMount = () => {
    this.getList();
  }

  getList = async () => {
    const { info } = this.props;
    try {
      Taro.showLoading({mask: true, title: '数据加载中...'})
      const { data } = await getListByLessonRecord({ phone: info.mobile })
      Taro.hideLoading()
      this.setState({list: data})
    } catch(e) {
      dialog.toast({title: e.message});
    }
  }

  handlePlayer = (item) => {
    const { videoUrl, lessonName } = item
    const { setUrl } = this.props
    if (!videoUrl) return dialog.toast({title: `视频地址videoUrl不存在`});
    setUrl(videoUrl)
    Taro.navigateTo({url: '/pages/web/index?title=' + lessonName})
  }

  handleCert = (item) => {
    const { certUrl, lessonName } = item
    const { setUrl } = this.props
    if (!certUrl) return dialog.toast({title: `证书地址certUrl不存在`});
    Taro.showLoading({title: '证书加载中...'})
    Taro.request({
      url: certUrl,
      success: ({statusCode, data}) => {
        if (statusCode === 200) {
          setUrl(data.url)
          Taro.navigateTo({url: '/pages/web/index?title=' + lessonName})
        }
      },
      complete: () => {
        Taro.hideLoading()
      }
    })
  }

  render () {
    let { list } = this.state;
    return (
      <View className={styles.wrapper}>
        <View className={styles.headWrap}>
          <View className={styles.hint}>提示：该页面展示您在众包平台学习的课程</View>
        </View>
        <View className={styles.waitWrap}>
          {
            (list && list.length>0) ? list.map((item, index)=>{
              return(
                <View className={styles.order} key={index + ''}>
                  <View className={styles.item}>
                    <Text className={styles.label}>课程名称：</Text>
                    <Text className={styles.value}>{item.lessonName}</Text>
                  </View>
                  <View className={styles.item}>
                    <Text className={styles.label}>学习时间：</Text>
                    <Text className={styles.value}>{item.learnDate}</Text>
                  </View>
                  <View className={styles.item}>
                    <Text className={styles.label}>学习状态：</Text>
                    {/* 0：未完成 1：已完成 */}
                    <Text className={styles.value}>{item.finished ? '已完成': '未完成'}</Text>
                  </View>
                  <View className={styles.item}>
                    <Button className={styles.btn} onClick={() => this.handlePlayer(item)}>播放观看</Button>
                    <Button className={styles.btn} onClick={() => this.handleCert(item)}>查看电子证书</Button>
                  </View>
                </View>
              )
            }) : <NoData></NoData>
          }
        </View>
      </View>
    )
  }
}
